<template>
  <div class="buts">
    <a-space :size="6">
      <AddModal @editOk="updateList"></AddModal>
    </a-space>
  </div>
  <DataTable :columns="columns" :get-api="getMenuListApi" ref="dataTableInstance">
    <template #bodyCell="{ column, record, index, text }">
      <ActionsBtn
        @editOk="updateList"
        @actions-edit="clickEdit"
        @actions-delete="deleteDict"
        :column="column"
        :record="record"
        :index="index"
        :text="text"
      ></ActionsBtn>
    </template>
  </DataTable>
  <EditModal @edit-ok="updateList" ref="clickEditModalInstance"></EditModal>
</template>
<script lang="ts" setup>
import { columns } from './constant'
import ActionsBtn from './components/actions-btn.vue'
import AddModal from './components/add-modal.vue'
import EditModal from './components/edit-modal.vue'
import DataTable from './components/data-table.vue'
import { createVNode, ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { type CreateMenuDto, deleteMenuApi, getMenuListApi } from '@/api/menu.api.ts'

const dataTableInstance = ref()
const updateList = () => {
  dataTableInstance.value.getList(true)
}

const clickEditModalInstance = ref()
const clickEdit = (record: CreateMenuDto) => {
  clickEditModalInstance.value.showModal(record)
}

const deleteDict = (record: { id: string }) => {
  Modal.confirm({
    title: '请确认删除！',
    icon: createVNode(ExclamationCircleOutlined),
    content: '删除后无法恢复',
    async onOk() {
      await deleteMenuApi(record.id)
      dataTableInstance.value.getList(true)
    },
  })
}
defineOptions({
  name: 'MenuPage',
})
</script>
<style>
.buts {
  padding: 10px 0;
}
</style>
